// frontend/src/components/Navbar.js
export const NavbarComponent = {
  props: ['user', 'selectedPlatform', 'platformThemeClass'],
  methods: {
    showWelcome() {
      this.$emit('show-welcome');
    },
    showAdminPanel() {
      this.$emit('show-admin-panel');
    },
    logout() {
      this.$emit('logout');
    }
  },
  template: `
    <nav class="navbar navbar-expand-lg navbar-dark bg-gradient" 
         :class="user ? platformThemeClass : 'bg-dark'">
      <div class="container">
        <a class="navbar-brand fw-bold" href="#" @click="showWelcome">
          <i class="bi bi-cloud-fill me-2"></i>库美生物信息云平台
        </a>
        
        <!-- 右上角用户菜单 -->
        <div class="d-flex align-items-center" v-if="user">
          <!-- 管理员系统管理入口 -->
          <div class="dropdown me-3" v-if="user && user.role === 'admin'">
            <button class="btn btn-outline-light dropdown-toggle" 
                    type="button" 
                    data-bs-toggle="dropdown">
              <i class="bi bi-gear me-1"></i>系统管理
            </button>
            <ul class="dropdown-menu dropdown-menu-end">
              <li>
                <button class="dropdown-item" @click="showAdminPanel">
                  <i class="bi bi-tools me-2"></i>管理面板
                </button>
              </li>
            </ul>
          </div>
          
          <div class="dropdown">
            <button class="btn btn-outline-light dropdown-toggle" 
                    type="button" 
                    data-bs-toggle="dropdown">
              <i class="bi bi-person-circle me-1"></i>
              {{ user.username }}
            </button>
            <ul class="dropdown-menu dropdown-menu-end">
              <li>
                <button class="dropdown-item" @click="$emit('switch-to-profile')">
                  <i class="bi bi-person me-2"></i>个人资料
                </button>
              </li>
              <li><hr class="dropdown-divider"></li>
              <li>
                <button class="dropdown-item text-danger" @click="logout">
                  <i class="bi bi-box-arrow-right me-2"></i>退出登录
                </button>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </nav>
  `
};